<template>
    <div class="pagemain">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="历史记录" right-text="清空" left-arrow @click-left="toBack" @click-right="toClear" />
        </div>
        <div class="padding-box">
            <div v-for="(item, index) in historys" :key='index'>
                <div class="date">{{ item.date }}</div>
                <div v-for="(products, pIndex) in item.pro_ids" :key="pIndex" class="product"
                    @click="toDetail(products.productId)">
                    <img :src="alPath + 'product/product_' + products.productId + '/' + products.productPic"
                        class="product-img">
                    <div class="width-control">
                        <div class="one-line product-name">{{ products.productName }}</div>
                        <div class="one-line product-title">{{ products.productTitle }}</div>
                    </div>
                    <div class="flex-box">
                        <div class="product-price"></div>
                        <!-- <div class="product-price">￥<span class="big">{{ products.productPrice |
                getPriceFront }}</span>.{{ products.productPrice | getPriceEnd }}</div> -->
                        <div class="product-del" @click.stop="toDelete(item.date, products.productId)">删除</div>
                    </div>
                </div>
            </div>
            <img v-if="historys.length == 0" src="../../assets/tip_content.png" class="content-tip" alt="">
        </div>
    </div>

</template>

<script>
import { alPath } from "../../network/request";
export default {
    data() {
        return {
            alPath,
            user_id: localStorage.userId,
            historys: '',
            allHistorys: ''
        }
    },
    mounted() {

    },
    methods: {

        getData: function () {
            this.allHistorys = localStorage.historys;
            if (this.allHistorys != undefined) {
                this.allHistorys = JSON.parse(this.allHistorys);
            } else {
                this.allHistorys = {};
            }
            if (!(this.allHistorys.hasOwnProperty(this.user_id))) {
                this.allHistorys[this.user_id] = [];
            }
            this.historys = this.allHistorys[this.user_id];

            console.log(this.historys);
        },
        toDetail: function (product_id) {
            localStorage.product_id = product_id;
            this.$router.push('/detail')
        },
        toDelete: function (date, product_id) {

            this.$dialog.confirm({
                title: '中肽悦享',
                message: '是否删除该条历史浏览',
            }).then(() => {
                for (var i = 0; i < this.historys.length; i++) {
                    if (this.historys[i].date == date) {
                        for (var j = 0; j < this.historys[i].pro_ids.length; j++) {
                            if (this.historys[i].pro_ids[j].productId == product_id) {
                                this.historys[i].pro_ids.splice(j, 1);
                            }
                        }
                        if (this.historys[i].pro_ids.length == 0) {
                            this.historys.splice(i, 1);
                        }
                    }
                }
                this.allHistorys[this.user_id] = this.historys;
                localStorage.historys = JSON.stringify(this.allHistorys);
            }).catch(() => {
            });


        },
        toClear: function () {
            if (this.historys.length > 0) {
                this.$dialog.confirm({
                    title: '中肽悦享',
                    message: '是否要清空历史浏览',
                }).then(() => {
                    this.historys = [];
                    this.allHistorys[this.user_id] = this.historys;
                    localStorage.historys = JSON.stringify(this.allHistorys);
                    this.$toast("清空完毕");
                }).catch(() => {
                });
            }
        },
        toBack() {
            this.$router.go(-1)
        },


    },
    created() {
        this.getData();

    },
    //计算属性
    computed: {

    },
    filters: {
        toFixed2: function (value) { //保留两位小数
            return (value * 1).toFixed(2);
        },
        getPriceFront: function (value) { //获取价格整数部分
            return (value * 1).toFixed(2).toString().split(".")[0];
        },
        getPriceEnd: function (value) { //获取价格小数部分
            return (value * 1).toFixed(2).toString().split(".")[1];
        }
    },


}

</script>

<style lang='less' scoped>
.pagemain {
    background: #f2f2f2;
    height: 100vh;
    overflow-y: scroll;

}

.padding-box {
    box-sizing: border-box;
    width: 100%;
    padding: 100px 24px 0;
}

.product {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: 100%;
    height: 224px;
    padding: 24px 24px 24px 224px;
    background: #FFF;
    border-radius: 16px;
    margin-bottom: 24px;
}

.product-img {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 176px;
    height: 176px;
    border-radius: 16px;
}

.width-control {
    width: 100%;
}

.one-line {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product-name {
    font-size: 28px;
    color: #333;
}

.product-title {
    font-size: 24px;
    color: #999;
}

.product-price {
    font-size: 24px;
    font-weight: bold;
    color: #FF3B14;
}

.product-price .big {
    font-size: 32px;
}

.product-del {
    width: 84px;
    font-size: 28px;
    color: #666;
    text-align: right;
}


.date {
    font-size: 32px;
    color: #666;
    margin-bottom: 12px;
}

.content-tip {
    display: block;
    width: 316px;
    margin: 100px auto;
}

.empty {
    position: absolute;
    right: 0;
    height: 88px;
    font-size: 28px;
    color: #666;
    text-align: right;
    line-height: 88px;
    padding: 0 24px;
    bottom: 0px;
}



.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>